【JavaScript】在JavaScript中使用switch(true)

javascript

WM 2021-05-08 14:39:34 ‧ 2134 瀏覽

分享至

開發專案時，在其中的某個環節，想說除了switch之外，是否有更好的寫法，上網一查發現，還有switch(true)這種用法，感覺還蠻新奇的，第一次接觸到的人或許會對expression裡面怎會是true感到疑惑。

首先，我們先來討論以下情境：
請依照分數高低，分配SABCD級距。

一般的情況都會這樣寫：

if (score === 100) {
  level = 'S';
} else if (score >= 90 && score < 100) {
  level = 'A';
} else if (score >= 80 && score < 90) {
  level = 'B';
} else if (score >= 70 && score < 80) {
  level = 'C';
} else if (score >= 60 && score < 70) {
  level = 'D'
} else {
  level = '不及格'
}

使用條件(三元)運算子，更簡潔

level =
  score === 100 ? 'S' : score >= 90 && score < 100 ?
    'A' : score >= 80 && score < 90 ?
      'B' : score >= 70 && score < 80 ?
        'C' : score >= 60 && score < 70 ?
          'D' : '不及格'

最後是今天要討論的主題switch(true)

switch (true) {
  case score === 100:
    level = 'S';
    break;
  case score >= 90 && score < 100:
    level = 'A';
    break;
  case score >= 80 && score < 90:
    level = 'B';
    break;
  case score >= 70 && score < 80:
    level = 'C';
    break;
  case score >= 60 && score < 70:
    level = 'D';
    break;
  default:
    level = '不及格';
}

為何switch (true)可行，答案其實很簡單：case條件是用來跟expression匹配的。

switch不只是用來比對string、number，也可以比對boolean。

至於可讀性，第二種相對會比較差。

個人會比較喜歡第三種，你們覺得呢？

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 則留言

Luis-Chen

iT邦新手 4 級 ‧ 2021-05-09 10:39:50

我現在更喜歡這種寫法
大家怎麼看?

const level= ((score) => {
    if(typeof score !== 'number') return 'NAN'
    if(score===100) return 'S'
    if(score >= 90 && score < 100) return  'A';
    if(score >= 80 && score < 90)  return 'B';
    if(score >= 70 && score < 80)  return 'C';
    if(score >= 60 && score < 70)  return 'D
    if(score < 60) return 'F'
})(100)